<template>
  <div>
    <!--  面包屑导航区域 :to="{path:'/admin/welcome' 路由跳转 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>业务管理</el-breadcrumb-item>
      <el-breadcrumb-item>打卡点列表</el-breadcrumb-item>
      <el-breadcrumb-item>{{travel.name}}</el-breadcrumb-item>
      <el-breadcrumb-item to="/business/activity">{{activity.name}}</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  卡片视图区域  -->
    <el-card class="box-card">
      <!--   搜索与添加及刷新区域 :gutter间距  -->
      <el-row :gutter="20">
        <!--    搜索    -->
        <el-col :span="3">
          <el-tag type="success">当前游玩点为:{{travel.name}}</el-tag>
        </el-col>
        <el-col :span="3">
          <el-tag type="success">当前活动为:{{activity.name}}</el-tag>
        </el-col>
        <!--   新增按钮    type="primary"蓝色主要 -->
        <el-col :span="8">
          <el-button type="primary" @click="returnActivity()" icon="el-icon-s-promotion">返回活动</el-button>
          <el-button type="primary" @click="saveDialogVisible = true"  icon="el-icon-folder-add">新增打卡点</el-button>
          <el-button type="info" icon="el-icon-refresh" @click="refresh()">刷新</el-button>
        </el-col>
      </el-row>
      <!--   打卡点列表区域   -->
      <!--   打卡点表格   -->
      <el-table  :data="points">
        <!--   模板列-数据值    -->
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="游玩ID" prop="travelId"></el-table-column>
        <el-table-column label="活动ID" prop="activityId"></el-table-column>
        <el-table-column label="视频" prop="video"></el-table-column>
        <el-table-column label="时长" prop="time"></el-table-column>
        <el-table-column label="收费" prop="charge" :formatter = "problemSourceFormat"></el-table-column>
        <el-table-column label="顺序" prop="sort"></el-table-column>
        <el-table-column label="创建时间" prop="createdAt"></el-table-column>
        <el-table-column label="修改时间" prop="updatedAt"></el-table-column>
        <!--<el-table-column label="当前行数据" style="display: none">
          <template slot-scope="scope">
            {{scope.row}}
          </template>
        </el-table-column>-->
        <!--   模板列-操作区    -->
        <!--   模板列-操作区-状态封号开关    -->
        <el-table-column label="黑名单/有效">
          <template slot-scope="scope">
            <el-switch v-model = "scope.row.status"
                       :active-value="0"
                       :inactive-value="1"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       @change="changedStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <!--   模板列-操作区-修改和删除    -->
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button type="primary" @click="showEditpoint(scope.row.id)" icon="el-icon-edit" size="mini">修改</el-button>
            <el-button type="danger" @click="del(scope.row.id)" icon="el-icon-delete" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  分页插槽    -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[1, 5, 50, 100]"
          :page-size="queryInfo.size"
          layout="total, sizes, prev, pager, next,jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <!--  添加模态框  -->
    <el-dialog
        title="添加打卡点信息"
        :visible.sync="saveDialogVisible"
        width="50%"
        @close = "saveDialogClosed">
      <!--   内容主体区域   -->
      <el-form :model="point" :rules="saveFormRules" ref="saveFormRef" label-width="110px">
        <el-form-item label="游玩名称" >
          <el-tag>{{travel.name}}</el-tag>
        </el-form-item>
        <el-form-item label="活动名称" >
          <el-tag>{{activity.name}}</el-tag>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="point.title" @input="updateInput($event)"></el-input>
        </el-form-item>
        <el-form-item label="视频" prop="video">
          <el-input v-model="point.video" @input="updateInput($event)"></el-input>
        </el-form-item>
        <el-form-item label="时长" prop="time">
          <el-input v-model="point.time" @input="updateInput($event)"></el-input>
        </el-form-item>
        <!--          <el-form-item label="收费" prop="charge">-->
        <!--            <el-input v-model="point.charge" @input="updateInput($event)"></el-input>-->
        <!--          </el-form-item>-->
        <el-form-item label="收费" prop="charge">
          <el-select v-model="point.charge" placeholder="请选择" style="width:100%">
            <el-option
                v-for="item in CHARGE"
                :key="item.key"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="顺序" prop="sort">
          <el-input v-model="point.sort" @input="updateInput($event)"></el-input>
        </el-form-item>
      </el-form>
      <!--  底部按钮区域   -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="savepoint">保 存</el-button>
        <el-button @click="saveDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--  修改模态框  -->
    <el-dialog
        title="修改打卡点信息"
        :visible.sync="editDialogVisible"
        width="50%"
        @close = "editDialogClosed">
      <!--   内容主体区域   -->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="110px">
        <el-form-item label="游玩名称" >
          <el-tag>{{travel.name}}</el-tag>&nbsp;
          <el-tag>ID:{{travel.id}}</el-tag>
        </el-form-item>
        <el-form-item label="活动名称" >
          <el-tag>{{activity.name}}</el-tag>&nbsp;
          <el-tag>ID:{{activity.id}}</el-tag>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title" @input="updateInput($event)"></el-input>
        </el-form-item>
        <el-form-item label="视频" prop="video">
          <el-input v-model="editForm.video" @input="updateInput($event)"></el-input>
        </el-form-item>
        <el-form-item label="时长" prop="time">
          <el-input v-model="editForm.time" @input="updateInput($event)"></el-input>
        </el-form-item>
        <!--        <el-form-item label="收费" prop="charge">-->
        <!--          <el-input v-model="editForm.charge" @input="updateInput($event)"></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="收费" prop="problemSourceFormat">
          <el-select v-model="editForm.charge" placeholder="请选择"  style="width:100%">
            <el-option
                v-for="item in CHARGE"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="顺序" prop="sort">
          <el-input v-model="editForm.sort" @input="updateInput($event)"></el-input>
        </el-form-item>
      </el-form>
      <!--  底部按钮区域   -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editpoint">保 存</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/*
* 方法 methods:
*   problemSourceFormat 枚举替换
*   updateInput 更新键盘输入input值
*   list() 打卡点列表查询/刷新
*   handleSizeChange 监听页面条数变化
*   handleCurrentChange 监听页码值变化
*   addDialogClosed 监听添加模态框的关闭事件
*   editDialogClosed 监听修改模态框的关闭事件
*   addpoint 打卡点添加
*   showEditpoint 修改打卡点前根据id获取打卡点对象决定是否展示模态框
*   changedStatus 状态封号
*   del 删除打卡点
*   openFullScreen() 等待Loading加载
*   selectByName 模糊搜索
*   refresh() 刷新
*
* 生命周期 mounted:
*   _this.list() 页面初始化时候执行list
*
* 数据 data:function ():
*   point 打卡点实体数据
*   points:[] 一个point空数组
*   editForm 编辑表单
*   CHARGE 收费枚举
*   saveDialogVisible 模态框可视
*   editDialogVisible 模态框可视
*   addDialogVisible 控制模态框显示隐藏的布尔值
*   total 总条数
*   queryInfo 请求参数块
*   queryName 模糊搜索
*   saveFormRules 保存校验
*   editFormRules 修改校验
*
* */
export default {
  name: "Point",
  data:function (){
    return{
      point:{},
      CHARGE:[{value:"C",label:"收费"},{value:"F",label:"免费"}],
      points:[],
      queryInfo:{
        page:1,
        size:5,
      },
      queryName:"",
      total:0,
      saveDialogVisible:false,
      editDialogVisible:false,
      saveFormRules:{
        title:[
          {required:true,message:'请输入打卡点名称',trigger:'blur'},
          {min:3,max:10,message:'请打卡点名称在3~10个字符之间',trigger: 'blur'}
        ],
      },
      editFormRules:{
        title:[
          {required:true,message:'请输入打卡点名称',trigger:'blur'},
          {min:3,max:10,message:'请打卡点名称在3~10个字符之间',trigger: 'blur'}
        ],
      },
      editForm:{},
      travel:{},
      activity:{},
    }
  },
  mounted:function (){
    let _this = this;
    let travel = SessionStorage.get("travel") || {};
    let activity = SessionStorage.get("activity") || {};
    if(travel.isEmpty || activity.isEmpty){
      _this.$router.push("/welcome");
    }
    _this.travel = travel;
    _this.activity = activity;
    _this.list(1);//组件加载时立刻执行一次查询渲染数据
  },
  methods:{
    returnActivity(){
      let _this = this;
      _this.$router.push("/business/activity")
    },
    problemSourceFormat(data){
      if(data.charge == 'F'){
        return '免费'
      }
      if(data.charge == 'C'){
        return '收费'
      }
    },
    //更新键盘输入input值
    updateInput(e){
      let _this = this;
      _this.$forceUpdate()
    },
    //监听 pagesize当前页条数 改变的事件
    handleSizeChange(newSize){
      console.log(newSize)
      let _this = this;
      _this.$data.queryInfo.size=newSize;
      if(_this.$data.queryName !==""){
        _this.selectByName();
      }else{
        _this.list();//重新获取查询list,达到分页切换页面前进后退
      }
    },
    //监听 页码值 改变的事件
    handleCurrentChange(newPage){
      let _this = this;
      _this.$data.queryInfo.page=newPage;
      if(_this.$data.queryName !==""){
        _this.selectByName();
      }else{
        _this.list();//重新获取查询list,达到分页切换页面前进后退
      }
    },
    // 监听添加模态框的关闭事件
    saveDialogClosed(){
      let _this = this;
      _this.$refs.saveFormRef.resetFields()
    },
    // 监听添加模态框的关闭事件
    editDialogClosed(){
      let _this = this;
      _this.$refs.editFormRef.resetFields()
    },
    // 查询 所有打卡点
    list(page){
      let _this = this;
      _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/point/list',{
        page:_this.$data.queryInfo.page,
        size:_this.$data.queryInfo.size,
        travelId:_this.travel.id,
        activityId:_this.activity.id,
      }).then((response)=>{
        console.log("查询打卡点列表结果:",response);
        let resp = response.data;
        _this.points = resp.content.list;
        _this.total = resp.content.total;
      })
    },
    savepoint(page){
      let _this = this;
      _this.point.activityId = _this.activity.id;
      _this.point.travelId = _this.travel.id;
      _this.$refs.saveFormRef.validate(vaild=>{
        if(!vaild)return //如果验证通过才发起添加用户的网络请求
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/point/save',_this.point).then((response)=>{
          console.log("保存打卡点列表结果",response);
          let resp = response.data;
          if (resp.success){
            _this.$data.saveDialogVisible = false;
            _this.$data.editDialogVisible = false;
            _this.list(1);
            _this.$message.success('保存打卡点信息成功');
          }
        })
      })
    },
    editpoint(page){
      let _this = this;
      _this.$refs.editFormRef.validate(vaild=>{
        if(!vaild)return //如果验证通过才发起添加用户的网络请求
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/point/save',_this.editForm).then((response)=>{
          console.log("修改打卡点列表结果",response);
          let resp = response.data;
          if (resp.success){
            _this.$data.saveDialogVisible = false;
            _this.$data.editDialogVisible = false;
            _this.list(1);
            _this.$message.success('修改打卡点信息成功');
          }
        })
      })
    },
    showEditpoint(id){
      console.log("当前行id值",id);
      let _this = this;
      _this.$ajax.get(process.env.VUE_APP_SERVER+'/business/admin/point/selectId/'+id).then((response)=>{
        let resp = response.data;
        if(response.status !== 200){
          return _this.$message.error("查询打卡点信息失败");
        }
        _this.editForm = resp.content;
        console.log("ID查询打卡点列表结果:",response);
        _this.editDialogVisible = true;
      })
    },
    changedStatus(point){
      let _this = this;
      console.log("测试",point)
      _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/point/changedStatus',point).then((response)=>{
        if(response.status !=200){
          return _this.$message.error("修改状态失败")
        }
        _this.$message.success("修改状态成功")
        console.log("改变打卡点状态结果",response);
        let resp = response.data;
      })
    },
    del(id){
      this.$confirm('此操作将打卡点永久删除, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("删除当前的id",id)
        let _this = this;
        _this.openFullScreen();
        _this.$ajax.delete(process.env.VUE_APP_SERVER+'/business/admin/point/delete/'+id).then((response)=>{
          console.log("删除打卡点列表结果:",response);
          let resp = response.data;
          if (resp.success){
            _this.list(1);
            _this.$message.success("删除打卡点成功")
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    openFullScreen() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
      }, 1000);
    },
    selectByName(page,queryName){
      let _this = this;
      _this.openFullScreen();
      console.log("当前搜索的name",_this.$data.queryName)
      _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/point/selectName',{
        page:_this.$data.queryInfo.page,
        size:_this.$data.queryInfo.size,
        name:_this.$data.queryName,
      }).then((response)=>{
        console.log("模糊查询打卡点名称结果:",response);
        let resp = response.data;
        _this.points = resp.content.list;
        _this.total = resp.content.total;
      })
    },
    refresh(){
      let _this = this;
      _this.openFullScreen();
      if(this.$data.queryName !==""){
        _this.selectByName();
      }else{
        _this.list();//重新获取查询list,达到分页切换页面前进后退
      }
    }
  },
}
</script>

<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>